<template>
  <div>
    <div v-if="showLabel">
      {{ $t(labelName) }}
    </div>
    <el-select v-model="svalue" :size="size" :disabled="disabled" filterable clearable :placeholder="placeholder">
      <el-option
        v-for="item in dataList"
        :key="item.id"
        :label="item.fundName"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
import { findSpvFund } from '@/api/fund/fundBase.js'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    showLabel: {
      type: Boolean,
      default: false
    },
    labelName: {
      type: String,
      default: 'SPV'
    },
    size: {
      type: String,
      default: () => ''
    },
    // 投资主体ID- 如不为空则只查询该投资主体投资过的基金
    investorId: {
      type: String,
      default: () => ''
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否开启权限范围控制
    scopeAuthority: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      svalue: this.value,
      dataList: []
    }
  },
  watch: {
    value(newVal) {
      this.svalue = newVal
    },
    svalue(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$emit('input', this.svalue)
        this.$emit('change', this.svalue)
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      findSpvFund({ investorId: this.investorId, scopeAuthority: this.scopeAuthority }).then(response => {
        this.dataList = response.data
      })
    }
  }
}
</script>
